<template>
	<div class="home-container">
		<!-------------------- 头部开始------------------- -->
		<van-nav-bar>
			<template #right>
				<i
					class="iconfont iconwode wodeClass"
					@click="$router.push('/personal')"
				></i>
			</template>
			<template #left>
				<i class="iconfont iconnew newClass"></i>
			</template>
			<template #title>
				<div class="search-container">
					<i class="iconfont iconsearch"></i>
					<span>搜索商品</span>
				</div>
			</template>
		</van-nav-bar>
		<!-------------------- 头部结束------------------- -->
		<!--------------------tabs开始------------------------- -->
		<van-tabs>
			<van-tab v-for="index in 8" :title="'标签 ' + index" :key="index">
				内容 {{ index }}
			</van-tab>
			<van-tab title="+" title-class="plus"></van-tab>
		</van-tabs>
		<!--------------------tabs结束------------------------- -->
	</div>
</template>

<script>
	export default {
		methods: {},
	};
</script>

<style lang="less" scoped>
	.home-container {
		/deep/.van-nav-bar {
			background-color: #ff0000;
			.van-nav-bar__title {
				max-width: 80%;
			}
			.search-container {
				width: 70vw;
				height: 35px;
				background-color: rgba(255, 255, 255, 0.6);
				color: #ffffff;
				margin-left: 25px;
				border-radius: 17px;
				line-height: 35px;
				i {
					vertical-align: middle;
					padding-right: 5px;
				}
			}
			.wodeClass {
				font-size: 25px;
				color: #fff;
			}
			.newClass {
				font-size: 50px;
				color: #fff;
			}
			.van-nav-bar__right {
				padding: 0 10px;
			}
		}
		/deep/.van-tabs {
			.van-tab__text {
				font-size: 16px;
			}
			.van-tab--active {
				font-weight: 700;
			}
			// /deep/.van-tab:nth-child(9) {
			// 	.van-tab__text {
			// 		font-size: 40px;
			// 		margin-top: -12px;
			// 	}
			// }
		}
	}
</style>